<template>
	<view class="qrOrder">
		<view class="container">
			<view class="card card1" v-for="(item, i) in address" :key="i" @click="toNav(`address/address`)">
				<image class="left" src="@/static/images/dd01.png" mode="aspectFit"></image>
				<view class="info">
					<view class="row">
						<text>{{ item.name }}</text>
						<text>{{ item.phone }}</text>
					</view>
					<view class="row2" v-if="item.areaName">
						<text>{{ item.areaName }} {{ item.address }}</text>
					</view>
				</view>
				<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
			</view>

			<view class="card card2">
				<view class="title">商品详情</view>
				<view class="goods" v-for="(item, i) in list" :key="i">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="info">
						<view class="row">
							<text class="line-2">{{ item.title }}</text>
							<text>{{ item.key_vals }}</text>
						</view>
						<view class="row2">
							<text>￥{{ item.price_sale }}</text>
							<view class="box">
								<u-number-box :disabled="numDisabled" v-model="item.num" :asyncChange="true" @change="valChange($event, item, i)"></u-number-box>
							</view>
						</view>
					</view>
				</view>

				<view class="info-item">
					<label>配送服务</label>
					<input type="text" value="快递派送" :disabled="true" />
				</view>
				<view class="info-item" @click="bzpop = true">
					<label>订单备注</label>
					<input v-model="viewForm.remark" type="text" class="line-1" :disabled="true" />
					<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
				</view>
			</view>

			<view v-if="showVipCard" class="gbbox" @click="handleVipCard">
				<view class="lbox">
					<image class="icon" src="@/static/images/qrzs.png" mode="aspectFit"></image>
					<text v-if="if_vip">您已是平台会员，享受专属会员价格</text>
					<text v-else>开通会员享受平台优惠</text>
				</view>
				<view class="rbox" v-if="!if_vip">
					<image v-if="ktvip" src="@/static/images/radio.png" mode="aspectFit"></image>
					<text v-else class="yuan"></text>
				</view>
			</view>

			<view class="card card2">
				<view class="title">价格明细</view>
				<view class="info-item" style="margin-top: 20rpx">
					<view class="innerbox">
						<label>商品原价</label>
						<input type="text" class="line-1" :value="`共${summation('num') || 0}件商品`" :disabled="true" />
					</view>
					<text>￥{{ summation('price_sale') || 0 }}</text>
				</view>

				<block v-if="ktvip">
					<view class="info-item">
						<view class="innerbox">
							<label>会员优惠</label>
							<input type="text" class="line-1" value="" :disabled="true" />
						</view>
						<text style="color: #e54e4e">-￥{{ order_info.vip_youhui || 0 }}</text>
					</view>
				</block>
				<view class="info-item">
					<view class="innerbox">
						<label>会员价</label>
						<input type="text" class="line-1" value="会员购买商品的价格" :disabled="true" />
					</view>
					<text>￥{{ order_info.tongjia }}</text>
				</view>
				<view class="info-item" v-if="parseFloat(order_info.vip_price)">
					<view class="innerbox">
						<label>会员费</label>
						<input type="text" class="line-1" value="开通会员费用" :disabled="true" />
					</view>
					<text>￥{{ order_info.vip_price || 0 }}</text>
				</view>
				<view class="info-item">
					<view class="innerbox">
						<label>配送费</label>
						<input type="text" class="line-1" value="满100免配送费" :disabled="true" />
					</view>
					<text v-if="order_info.yunfei">￥{{ order_info.yunfei || 0 }}</text>
					<text v-else>免运费</text>
				</view>

				<view v-if="order_info.yhq_list.length && select_pay_type.id === 1" class="info-item" @click="yhqpop = true">
					<view class="innerbox">
						<label>优惠券</label>
						<input type="text" style="color: #000" placeholder="选择优惠券" class="line-1" :value="checkedItem.title" :disabled="true" />
						<text v-if="checkedItem.jian">-￥{{ checkedItem.jian }}</text>
						<text v-if="checkedItem.money">-￥{{ checkedItem.money }}</text>
					</view>
					<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
				</view>

				<view class="totalbox">
					<text>合计应付</text>
					<text>￥{{ total }}</text>
				</view>
			</view>
			<view class="card card2">
				<view class="zffs">
					<text>支付方式</text>
					<view class="box" @click="pay_type_pop = true">
						<image class="pay-type" :src="select_pay_type.icon" mode="aspectFit"></image>
						<text>{{ select_pay_type.name }}</text>
						<image class="right_img" src="@/static/images/right.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="bzpop" round="24rpx" :closeOnClickOverlay="true" @close="bzpop = false">
			<view class="bzpopbox">
				<view class="title">订单备注</view>
				<u--textarea v-model="form.remark" height="292rpx" count :maxlength="200" placeholder="选填，填写您的需求，付款后商家可见"></u--textarea>
				<footer-btn text="确定" @submit="handlebzpop"></footer-btn>
			</view>
		</u-popup>

		<u-popup :show="pay_type_pop" round="24rpx" @close="pay_type_pop = false">
			<view class="pay_type_pop">
				<view class="title">支付方式</view>
				<view class="pay-type-list">
					<radio-group>
						<label class="item" v-for="(item, i) in pay_type_list" :key="i" @click="patTypeClickItem(item)">
							<view class="type-box">
								<image :src="item.icon" mode="aspectFit"></image>
								<text>{{ item.name }}</text>
							</view>
							<radio :checked="item.name === select_pay_type.name" :value="item.name" />
						</label>
					</radio-group>
				</view>
				<footer-btn text="确定" @submit="pay_type_pop = false"></footer-btn>
			</view>
		</u-popup>

		<yhqpop :yhqList="order_info.yhq_list" :needPay="order_info.need_pay" :show="yhqpop" @close="yhqpop = false"></yhqpop>
		<u-toast ref="uToast"></u-toast>
		<footer-btn isTm text="提交订单" :disabled="footer_disabled" showTotal :total="total" @submit="submit"></footer-btn>
	</view>
</template>

<script>
import API from '@/common/api';
import { mapState } from 'vuex';
import { get_userInfo } from '@/common/common_fun.js';
export default {
	name: 'qrOrder',
	computed: {
		...mapState(['checkedItem']),
		total() {
			if (this.order_info.need_pay) {
				if (this.checkedItem.jian) {
					let price = parseFloat(this.order_info.need_pay) - parseFloat(this.checkedItem.jian);
					if (price < 0) {
						return 0;
					} else {
						return price.toFixed(2);
					}
				} else if (this.checkedItem.money) {
					let price = parseFloat(this.order_info.need_pay) - parseFloat(this.checkedItem.money);
					if (price < 0) {
						return 0;
					} else {
						return price.toFixed(2);
					}
				} else {
					return this.order_info.need_pay.toFixed(2);
				}
			} else {
				return 0;
			}
		},
		summation() {
			return (key, i = 0) => {
				if (this.list.length > 0) {
					if (key === 'price_sale') {
						return this.list
							.reduce((total, current) => {
								return total + parseFloat(current[key]) * parseFloat(current.num);
							}, 0)
							.toFixed(i);
					} else {
						return this.list
							.reduce((total, current) => {
								return total + parseFloat(current[key]);
							}, 0)
							.toFixed(i);
					}
				} else {
					return 0;
				}
			};
		}
	},
	data() {
		return {
			pay_type_pop: false,
			pay_type_list: [
				{
					id: 1,
					name: '微信支付',
					icon: require('@/static/images/wechat.png')
				},
				{
					id: 2,
					name: '余额支付',
					icon: require('@/static/images/yue.png')
				}
			],
			select_pay_type: {
				id: 1,
				name: '微信支付',
				icon: require('@/static/images/wechat.png')
			},
			numDisabled: false,
			footer_disabled: false,
			bzpop: false,
			yhqpop: false,
			showVipCard: false,
			ktvip: false,
			if_vip: false,
			address: [],
			info: {},
			order_info: { yhq_list: [] },
			list: [],
			viewForm: {},
			form: {
				remark: ''
			}
		};
	},
	onLoad(data) {
		// 删除本地存储指定字段
		uni.removeStorageSync('ktvip');
		get_userInfo((data) => {
			this.ktvip = data.level == '会员用户';
			this.if_vip = data.level == '会员用户';
		});
	},
	onShow() {
		this.getAddress();
		this.init();
		this.getStatus();
	},
	onHide() {
		this.$store.state.checkedItem = {};
	},
	onUnload() {
		this.$store.state.checkedItem = {};
	},
	methods: {
		patTypeClickItem(item) {
			this.select_pay_type = item;
		},
		sub_pay_type() {},
		getStatus() {
			let ktvip = uni.getStorageSync('ktvip') || this.ktvip;
			if (ktvip) {
				this.list.forEach((item) => {
					item.num = 1;
				});
				this.numDisabled = true;
				this.msg('首次开通会员限购一双');
			} else {
				this.numDisabled = false;
			}
		},
		submit() {
			let product_info = this.list.map((item) => {
				return {
					inventoryId: item.inventoryId,
					productId: item.productId,
					num: item.num
				};
			});

			if (!this.address[0].id) {
				this.msg('请选择地址');
				return;
			}
			let yhq_id = '';
			if (this.checkedItem.hasOwnProperty('lingqu_id')) {
				yhq_id = this.checkedItem.lingqu_id;
			} else {
				if (this.checkedItem.id) yhq_id = this.checkedItem.id;
			}

			let params = {
				...this.form,
				product_info: JSON.stringify(product_info),
				buy_vip: this.ktvip ? 1 : 0,
				address_id: this.address[0].id,
				yhq_id: this.checkedItem.id
			};
			if (this.select_pay_type.id === 2) delete params.yhq_id;

			if (this.if_vip) params.buy_vip = 0;

			uni.showLoading({ title: '加载中', mask: true });
			// 创建订单
			API.getJson('orders_create', params).then((res) => {
				uni.hideLoading();
				const { code, data, message, order_id } = res;
				if (code === 1) {
					uni.showToast({ title: message });
					this.$store.state.checkedItem = {};
					if (this.order_info.need_pay == 0) {
						this.toNav(`paysuccess/paysuccess?id=${order_id}`);
						return;
					}
					this.pay_order(order_id);
				} else {
					uni.showToast({
						title: message,
						icon: 'none'
					});
				}
			});
		},
		// 支付
		pay_order(order_id) {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			// 余额支付
			if (this.select_pay_type.id === 2) {
				API.getJson('orders_yuePay', { order_id }).then((res) => {
					uni.hideLoading();
					const { code, buy_type, is_over, message } = res;
					console.log(res, '余额支付');
					if (code === 1) {
						if (is_over === 1) {
							this.toNav(`paysuccess/paysuccess?id=${order_id}`);
						} else {
							this.msg('余额支付失败');
						}
					} else {
						this.msg(message || '余额支付失败');
					}
				});
				return;
			}
			// 微信支付
			API.getJson('orders_wxPay', { order_id }).then((res) => {
				uni.hideLoading();
				const { code, data, message } = res;
				if (code === 1) {
					API.wx_pay(data).then((res) => {
						this.toNav(`paysuccess/paysuccess?id=${order_id}`);
					});
				} else {
					this.msg(message || '微信支付失败');
				}
			});
		},

		getPriceInfo(fun, num, i) {
			this.$store.state.checkedItem = {};
			let product_info = this.list.map((item, index) => {
				return {
					inventoryId: item.inventoryId,
					productId: item.productId,
					num: item.num
				};
			});
			if (typeof i === 'number') product_info[i].num = num;
			let params = {
				product_info: JSON.stringify(product_info),
				buy_vip: this.ktvip ? 1 : 0,
				yhq_id: this.checkedItem.id
			};
			if (this.if_vip) params.buy_vip = 0;
			API.getJson('orders_getPayInfo', params).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					this.footer_disabled = false;
					this.order_info = data;
					this.$nextTick(() => {
						if (typeof fun === 'function') fun();
					});
				} else {
					this.footer_disabled = true;
					this.init(false);
					this.$refs.uToast.show({
						message,
						duration: 4000,
						complete: () => {
							this.toBack();
						}
					});
				}
			});
		},

		handlebzpop() {
			this.viewForm = { ...this.form };
			this.bzpop = false;
		},
		getAddress() {
			API.getJson('userAddress_lists', {}).then((res) => {
				const { code, data, message } = res;
				if (code === 1) {
					let addressList = data.filter((item) => item.if_default);
					if (addressList.length === 0) {
						this.address = [{ name: '请选择地址' }];
					} else {
						this.address = addressList;
					}
				}
			});
		},
		init(flag = true) {
			let order_info = uni.getStorageSync('order_info') || [];
			if (order_info[0]) this.info = order_info[0];
			this.showVipCard = order_info.every((obj) => obj.if_refund);
			this.list = order_info;
			if (flag) this.getPriceInfo();
		},

		handleVipCard() {
			this.ktvip = !this.ktvip;
			uni.setStorageSync('ktvip', this.ktvip);
			this.getStatus();
			this.getPriceInfo();
		},
		valChange(e, item, i) {
			const { value } = e;
			uni.showLoading({ title: '加载中', mask: true });
			this.getPriceInfo(
				() => {
					item.num = e.value;
					uni.hideLoading();
				},
				value,
				i
			);
		}
	}
};
</script>

<style lang="less" scoped>
.qrOrder {
	.pay_type_pop {
		padding: 32rpx;
		height: 820rpx;
		border-radius: 24rpx;
		.pay-type-list {
			.item + .item {
				margin-top: 40rpx;
			}
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.type-box {
					display: flex;
					align-items: center;
					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 24rpx;
					}
					text {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}
		.title {
			text-align: center;
			padding-bottom: 46rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.bzpopbox {
		padding: 32rpx;
		height: 820rpx;
		border-radius: 24rpx;
		.title {
			text-align: center;
			padding-bottom: 46rpx;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}
	.zffs {
		.flex-between();

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		.box {
			display: flex;
			align-items: center;
			vertical-align: middle;
			.j-active();
			.right_img {
				padding-left: 16rpx;
				vertical-align: middle;
			}
			.pay-type {
				width: 40rpx;
				height: 40rpx;
				margin-right: 16rpx;
				vertical-align: middle;
			}
			text {
				font-size: 28rpx;
				vertical-align: middle;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
		}
	}
	.totalbox {
		.flex-between();
		padding-top: 34rpx;
		margin-top: 34rpx;
		border-top: 1px solid #f3f4f8;
		text:nth-of-type(1) {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
		}
		text:nth-of-type(2) {
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
	}
	.gbbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 686rpx;
		height: 84rpx;
		padding: 0 24rpx;
		margin: 16rpx 0;
		background: #1c1212;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.lbox {
			display: flex;
			align-items: center;
			.icon {
				width: 31rpx;
				height: 27rpx;
				margin-right: 16rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #ffd8a7;
			}
		}
		.rbox {
			display: flex;
			align-items: center;
			.yuan {
				width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #ffd8a7;
			}
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.right_img {
		width: 13rpx;
		height: 24rpx;
		// .bor();
	}
	.info-item + .info-item {
		padding-top: 30rpx;
	}
	.info-item {
		.flex-between();
		.innerbox {
			display: flex;
			align-items: center;
			label {
				width: 130rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			input {
				flex: 1;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				text-align: left;
			}
			text {
				font-size: 24rpx;
			}
		}
		label {
			width: 120rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		input {
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			text-align: right;
		}
		& > text {
			font-size: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		image {
			margin-left: 24rpx;
		}
	}
	.container {
		padding: 24rpx;
		.card2 {
			.goods + .goods {
				border-top: 1rpx solid #eee;
			}
			.goods {
				display: flex;
				padding: 32rpx 0;
				image {
					width: 176rpx;
					height: 176rpx;
					background: #f8f8f8;
				}
				.info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 24rpx;
					.row {
						text:nth-of-type(1) {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
						text:nth-of-type(2) {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}
					.row2 {
						.flex-between();
						& > text {
							font-size: 28rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #000000;
						}
					}
				}
			}
		}
		.card + .card {
			margin-top: 16rpx;
		}
		.card {
			padding: 34rpx 24rpx;
			background: #ffffff;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			.title {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
		}
		.card1 {
			display: flex;
			align-items: center;
			.j-active2();
			.left {
				width: 56rpx;
				height: 56rpx;
			}
			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				margin-left: 24rpx;
				.row {
					display: flex;
					align-items: flex-end;
					text:nth-of-type(1) {
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #222222;
						margin-right: 24rpx;
					}
					text:nth-of-type(2) {
						font-size: 24rpx;
						font-family: PingFang SC-Heavy, PingFang SC;
						color: #333333;
					}
				}
				.row2 {
					font-size: 24rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #333333;
				}
			}
		}
	}
}
</style>
